<template>
  <comcard>
    <div slot="com_header" class="cla_h">
      <div>商品分类</div>
      <div>
        <el-button size="small" type="primary" @click="dialogFormVisible = true"
          >添加分类</el-button
        >
      </div>
    </div>

    <div slot="com_con">
      <el-table :data="dataSource" style="width: 100%">
        <el-table-column prop="id" label="编号" width="180"> </el-table-column>
        <el-table-column label="分类" width="180">
          <template slot-scope="{ row }">
            <div v-if="row.isEdit">
              <el-input size="small" type="text" v-model="row.cateName">
              </el-input>
            </div>
            <div v-else>
              {{ row.cateName }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="是否启用">
          <template slot-scope="scope">
            <!-- <el-switch
            v-model="scope.row.state==1?true:false"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch> -->
            <el-switch
              v-model="scope.row.switchState"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :disabled="!scope.row.isEdit"
            >
            </el-switch>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              :type="scope.row.isEdit ? 'primary' : 'warning'"
              size="small"
              @click="upd(scope.row)"
              >{{ scope.row.isEdit ? "完成" : "编辑" }}</el-button
            >
            <el-button type="danger" size="small" @click="del(scope.row.id)"
              >删除</el-button
            >
            <el-button size="small" type="info" @click="goedit(scope.row)">
              <i class="el-icon-edit"></i>弹窗修改
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchObj.currentPage"
        :page-sizes="[3, 4, 6, 8]"
        :page-size="searchObj.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>

      <el-dialog title="添加分类" :visible.sync="dialogFormVisible">
        <el-form :model="formObj">
          <el-form-item label="分类名称">
            <el-input type="text" v-model="formObj.cateName"></el-input>
          </el-form-item>
          <el-form-item label="是否启用">
            <el-switch v-model="formObj.state"></el-switch>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button type="danger" @click="dialogFormVisible = false"
            >取 消</el-button
          >
          <el-button type="primary" @click="save()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </comcard>
</template>

<script>
import comcard from "../../components/card";
import { api_query, api_save, api_del, api_upd } from "../../api/goodsType.js";

export default {
  components: {
    comcard,
  },
  mounted() {
    this.query();
  },
  data() {
    return {
      // 与模态框表单对应数据源
      formObj: {
        cataName: "",
        state: true,
      },
      dialogFormVisible: false,
      // 渲染表格数据源
      searchObj: { currentPage: 1, pageSize: 3 },
      dataSource: [],
      total: 0,
    };
  },
  methods: {
    async query() {
      let rst = await api_query(this.searchObj);
      let { total, data } = rst;
      console.log(data);
      //给开关定义switchState
      // let arr = [];
      // data.forEach((item)=>{
      //   item.switchState=item.state==1?true:false;
      //   arr.push(item)
      // })
      let arr = data.map((item) => {
        item.switchState = item.state == 1 ? true : false;

        item.isEdit = false; //控制修改状态
        return item;
      });
      // this.dataSource = data;
      this.dataSource = arr;
      this.total = total;

      // alert(this.dataSource.length)
      // 完善删除，删除自动判断页码
      // if(this.dataSource.length==0){
      //   if(this.searchObj.currentPage>1){
      //     this.searchObj.currentPage--;
      //     this.query();
      //   }
      // }
    },

    handleSizeChange(val) {
      this.searchObj.pageSize = val;
      this.query();
    },
    handleCurrentChange(val) {
      this.searchObj.currentPage = val;
      this.query();
    },

    async save() {
      let rst = '';
      if(this.formObj.id){
       rst=await api_upd(this.formObj)
      }else{
      await api_save(this.formObj);
      }
      console.log(rst);
      //添加跳转
      if (!this.formObj.id) {
        // 解决添加时挑战最后一页的问题
        this.searchObj.currentPage = Math.ceil(
          ++this.total / this.searchObj.pageSize
        );
      }

      let { code, msg } = rst;
      this.query();
      this.formObj = {
        cataName: "",
        state: true,
      };
      this.dialogFormVisible = false;
    },

    del(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        let rst = await api_del({ id });
        console.log(rst);
        let { code, msg } = rst;
        if (code == 0) {
          // 完善删除，删除自动判断页码
          if (this.dataSource.length == 1) {
            if (this.searchObj.currentPage > 1) {
              this.searchObj.currentPage--;
            }
          }
          this.query();
          this.$message(msg);
        } else {
          alert(msg);
        }
      });
    },
    async upd(row) {
      //发送修改接口
      if (row.isEdit) {
        let rst = await api_upd({
          id: row.id,
          state: row.switchState,
          cateName: row.cateName,
        });
        console.log(rst);
        let { msg, code } = rst;
        if (code == 0) {
          this.$message.success(msg);
        }
      }
      row.isEdit = !row.isEdit;
    },

    //弹窗修改
    async goedit(row){
      let {cateName,id,state}=row;
      state = state == 1 ? true : false;
      this.formObj = { id, cateName, state };
      this.dialogFormVisible = true;
    }
  },
};
</script>

<style lang="less" scoped>
.cla_h {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>